<script setup lang="ts">
// import Nifi from "../../nifi";
import { ElButton, ElForm, ElFormItem, ElInput,ElSwitch } from 'element-plus';
import { IPackNifi } from "src/inter";
import { reactive, ref } from 'vue';
import {t} from "../../i18n/index"
import Nifi from '../../nifi';
interface Model {
    name: string;
    description: string;
}
const emits = defineEmits<{submit:[data:Model]}>();
const props = defineProps<{nifi: Nifi,names:string[],box:IPackNifi.DialogEl}>()
const {nifi,box,names} = props;
//

//
const model = reactive({name:'',description:''})

const elFormRef = ref();
// @ts-ignore
const validator = (r:any,v:string,c:any) => {
    if(!names.includes(v)){
        c();
    }
    else{
        c(t('param-addcontext-validate-failed'))
    }
}

const handleCancel = async () => {
    box.close();
}
const handleSubmit = async () => {
    try {
        await elFormRef.value?.validate();
    } catch (error) {
        console.error(error);
        return ;
    }
    emits("submit",model)
    box.close();
}
</script>

<template>
    <div class="w-40vw h-fit max-h-40vh flex flex-col gap-10px " @click.stop="">
        <div class="h-40px flex justify-between items-center">
            <div>{{  t('param-addcontext-add') }}</div>
            <div>
                <ElButton type="default" plain @click.stop="handleCancel">{{t('box-cancel-text')}}</ElButton>
                <ElButton type="primary" @click.stop="handleSubmit">{{t('box-submit-text')}}</ElButton>
            </div>
        </div>
        <div class="flex-1 overflow-auto p-x-20px">
            <ElForm ref="elFormRef" :model="model"  label-position="left">
                <ElFormItem prop="name" :label="t('param-addcontext-name-label')"  :rules="[{required:true,message:t('param-addcontext-name-rule')},{validator}]">
                    <ElInput v-model="model.name"></ElInput>
                </ElFormItem>
                <ElFormItem prop="description" :label="t('param-addcontext-desc-label')">
                    <ElInput v-model="model.description" type="textarea"></ElInput>
                </ElFormItem>
            </ElForm>
        </div>
    </div>
</template>